<script lang="ts" setup>
  import { PropType, watch } from 'vue'
  import { CodeScanSet } from '../../types'
  import PhoneContent from './components/PhoneContent.vue'

  const props = defineProps({
    sets: {
      type: Object as PropType<Array<CodeScanSet>>,
      required: true,
    },
  })

  watch(
    () => props.sets,
    (value) => {

    },
    { deep: true },
  )
</script>

<template>
  <div>
    <div class="phone">
      <div class="phone_bg1">
        <div class="phone_bg2">
          <div class="phone_bg3">
            <div class="header">
              <div class="phone_lh">
                <div class="phone_lh_con">
                  <div class="lh_tiao"></div>
                  <div class="lh_yuan"></div>
                </div>
              </div>
              <span class="date_time">15:25</span>
              <div class="states">
                <ul class="ul_xinhao">
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>

                <div class="wifi1">
                  <div class="wifi2">
                    <div class="wifi3">
                      <div class="wifi4">
                        <div class="wifi5"> </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="dianliang"></div>
              </div>
            </div>
            <div class="center">
              <div class="content_container">
                <el-scrollbar height="73vh">
                  <div class="content" v-loading="props.sets.length <= 0">
                    <PhoneContent :sets="props.sets" />
                  </div>
                </el-scrollbar>
              </div>
            </div>
            <div class="footer">
              <div class="phone_home"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="jingyin"></div>
      <div class="yl_jia"></div>
      <div class="yl_jian"></div>
      <div class="suoping"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @use './index.scss' as *;
</style>
